<template>
  <div class="app-container">
    <el-form ref="formLabelAlign" :rules="rules" :model="formLabelAlign" label-width="120px">
      <el-row>
        <el-col :span="8">
          <el-form-item label="原始密码" prop="oldPsd">
            <el-input show-password     v-model="formLabelAlign.oldPsd"/>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="8">
          <el-form-item label="新的密码" prop="newPsd">
            <el-input show-password v-model="formLabelAlign.newPsd"/>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="8">
          <el-form-item label="确认密码" prop="password">
            <el-input   show-password v-model="formLabelAlign.password"/>

          </el-form-item>
        </el-col>

      </el-row>


      <el-row>
        <el-col :span="8">
          <el-form-item>
            <el-button @click="save('formLabelAlign')" type="primary" size="mini">确 定</el-button>
            <el-button @click="resetForm('formLabelAlign')" size="mini">重 置</el-button>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>


  </div>
</template>

<script>

import {  updatePsd } from '@/api/user'
import { fail, fileToBase64, resetForm, success, validate } from '@/api/common'

export default {
  name: 'psd',

  data() {
    const validatePassword = (rule, value, callback) => {
      if(this.formLabelAlign.newPsd!==value){
        callback(new Error('两次密码输入不一致,请重新输入'))
      }else{
        callback();
      }

    }
    return {
      formLabelAlign: {
        oldPsd:'',
        newPsd:'',
        password:''
      },
      rules:{
         oldPsd:[
           { required: true, message: '请输入原始密码', trigger: 'change' }
         ],
        newPsd:[
          { required: true, message: '请输入新的密码', trigger: 'change' }
        ],
        password:[
          { required: true,  trigger: 'blur' ,validator: validatePassword}
        ]
      }
    }
  },
  computed: {},
  created() {

  },
  mounted() {

  },
  methods: {

    save(formName) {
       if(validate(this,formName)){
         updatePsd(this.formLabelAlign).then(res=>{
           if(res.code===200){
             success(res.msg);
             this.resetForm(formName);
           }else{
             fail(res.msg);
           }
         })
       }
    },
    resetForm(formName) {
      resetForm(this, formName)
    },
  }
}
</script>


